<template>
  <div>这是child1组件</div>
  <button>-</button>
  <span>{{ counter.count }}</span>
  <button @click="add">+</button>
  <div>doubleCount: {{ counter.doubleCount }}</div>
  <div>{{ counter.name }}</div>
  <div>{{ counter.list }}</div>
  <button @click="reset">重置仓库仓库</button>
</template>

<script setup lang="ts">
import { useCounterStore } from "@/stores/counter";

// 引进来的是一个方法
// 仓库的数据可以直接从实例里面拿到
const counter = useCounterStore();

const add = () => {
  // counter.count++;
  // counter.name = "lisi";

  // $patch相当于可以一次性地修改多个数据

  // $patch可以传入一个对象,用新的值去覆盖旧的值
  // counter.$patch({
  //   count: counter.count + 1,
  //   name: "lisi",
  //   list: [...counter.list, 9],
  // });

  // $patch可以传入一个函数，直接修改旧的值
  // counter.$patch((state) => {
  //   state.list.push(9);
  //   state.count++;
  // });

  // 也可以通过调用仓库的actions的方法来改变数据
  counter.increment();
};

const reset = () => {
  // $reset方法用于重置仓库数据的
  // 仅限于选项式地定义state的时候
  counter.$reset();
};

// $subscribe用于监听仓库数据的改变
// mutation表示用哪种方式改变了仓库的数据
// state表示改变以后的新数据
counter.$subscribe((mutation, state) => {
  console.log("仓库的数据改变了");
  console.log(mutation);
  console.log(state);
});

// $onAction当任意的action的函数被执行的时候调用
counter.$onAction(
  ({
    name, // action 名称
    store, // store 实例，类似 `someStore`
    args, // 传递给 action 的参数数组
    after, // 在 action 返回或解决后的钩子
    onError, // action 抛出或拒绝的钩子
  }) => {
    console.log(123);

    // // 为这个特定的 action 调用提供一个共享变量
    // const startTime = Date.now();
    // // 这将在执行 "store "的 action 之前触发。
    // console.log(`Start "${name}" with params [${args.join(", ")}].`);

    // // 这将在 action 成功并完全运行后触发。
    // // 它等待着任何返回的 promise
    // after((result) => {
    //   console.log(
    //     `Finished "${name}" after ${
    //       Date.now() - startTime
    //     }ms.\nResult: ${result}.`
    //   );
    // });

    // // 如果 action 抛出或返回一个拒绝的 promise，这将触发
    // onError((error) => {
    //   console.warn(
    //     `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
    //   );
    // });
  }
);
</script>
